<script setup lang="ts"></script>

<template>
  <view
    class="relative overflow-hidden min-h-screen w-full p-y-80rpx p-x-40rpx box-border flex-col flex-x-center-y-center text-white bg-black page-container-home"
  >
    <!-- 主要内容区域 -->
    <view class="z-1 flex w-full flex-col items-center text-center main-content-simplified">
      <!-- 状态栏占位符，移到主内容区外部或根据需要调整 -->
      <view class="status-bar-placeholder-standalone" />
      <!-- 醒目的模板名称 -->
      <view class="relative mb-70rpx template-title-container">
        <text
          class="inline-block text-112rpx font-bold text-transparent template-name gradient-text"
        >
          uni-app 开发模板
        </text>
        <view class="h-8rpx w-160rpx mt-20rpx mx-auto rounded-4rpx title-underline" />
      </view>

      <!-- 项目描述卡片 -->
      <view
        class="relative flex overflow-hidden w-full max-w-760rpx p-40rpx mb-80rpx items-center bg-[rgba(25,25,25,0.7)] rounded-24rpx description-card"
      >
        <view class="flex-1 card-text">
          <text class="block mb-12rpx text-md font-medium text-[#bbb] desc-title">
            现代化 uni-app TS 模板
          </text>
          <text class="text-sm leading-[1.6] text-[#ddd] desc-content">
            集成最新技术栈，提供炫酷 UI 与高性能体验，助您快速启动跨平台项目。
          </text>
        </view>
      </view>

      <!-- 版本号信息 -->
      <view class="mt-auto pb-0 mb--40rpx text-xs text-[#555] version-tip">
        <text>版本 v1.0.0</text>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view
      class="absolute bottom-0 left-0 z-0 overflow-hidden w-full h-400rpx footer-decoration-simplified"
    >
      <view class="absolute bottom--300rpx left--240rpx w-800rpx h-800rpx deco-shape-1" />
      <view class="absolute bottom--360rpx right--300rpx w-900rpx h-900rpx deco-shape-2" />
    </view>
  </view>
</template>

<style lang="scss">
.page-container-home {
  // 青色光晕 (左上角) - 定位和尺寸保留在 SCSS
  &::before {
    position: absolute;
    top: -300rpx;
    left: -300rpx;
    z-index: 0;
    width: 1000rpx;
    height: 1000rpx;
    pointer-events: none;
    content: '';
    background: radial-gradient(circle, rgb(0 220 255 / 10%) 0%, transparent 70%);
    filter: blur(120rpx);
  }

  // 品红色光晕 (右下角) - 定位和尺寸保留在 SCSS
  &::after {
    position: absolute;
    right: -400rpx;
    bottom: -400rpx;
    z-index: 0;
    width: 1200rpx;
    height: 1200rpx;
    pointer-events: none;
    content: '';
    background: radial-gradient(circle, rgb(255 42 109 / 8%) 0%, transparent 70%);
    filter: blur(140rpx);
  }

  .main-content-simplified {
    .template-title-container {
      .template-name {
        letter-spacing: 4rpx;

        &.gradient-text {
          background: linear-gradient(90deg, #00f2ea, #ff2a6d);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .title-underline {
        background: linear-gradient(90deg, #00f2ea, #ff2a6d);
        box-shadow:
          0 0 16rpx rgb(0 242 234 / 40%),
          0 0 16rpx rgb(255 42 109 / 40%);
      }
    }

    .description-card {
      border: 2rpx solid rgb(255 255 255 / 8%);
      box-shadow: inset 0 2rpx 6rpx rgb(0 0 0 / 30%);
      backdrop-filter: blur(15px);
    }
  }

  // 底部装饰调整
  .footer-decoration-simplified {
    pointer-events: none;

    .deco-shape-1 {
      background: radial-gradient(circle, rgb(0 220 255 / 12%) 0%, transparent 65%);
      filter: blur(80rpx);
    }

    .deco-shape-2 {
      background: radial-gradient(circle, rgb(255 42 109 / 10%) 0%, transparent 65%);
      filter: blur(90rpx);
    }
  }
}
</style>
